/* -------------------------- */
/*           MISC             */
/* -------------------------- */

[style="color: rgb(245, 248, 250);"] {
  display: none;
}

[style="padding: 0px;"] > .flex-h-box {
  align-items: center;
}

div.kanban-title > span {
  display: flex;
  align-items:center;
  justify-content:center;
}

div.kanban-title > .rm-page-ref {
  color: white !important;
}

.rm-ref-page-view .kanban-board {
  display: none !important;
}

div.kanban-board {
  max-width: 620px;
}

div.rm-block-text, textarea.rm-block-text {
  max-width: none;
}

.rm-embed-inner-block-hide span.roam-highlight, .rm-block-ref span.roam-highlight {
  background-color: #202b33;
}

.rm-embed-inner-block-hide span.roam-highlight:hover, .rm-block-ref span.roam-highlight:hover {
  background-color: #fef09f;
}

/* fix the slide height and background color */
div.slider {
  position: static;
  background-color: transparent;
}

/* for when filter is active on page */
.bp3-icon-filter[style*="color"] {
  color: rgb(var(--color-secondary)) !important;
}

/* better caret positioning in linked references */
.bp3-icon-caret-down::before {
  color: var(--bullet-color) !important;
}
.bp3-icon-caret-down {
  display: inline-block !important;
  /*margin-bottom: 8px;*/
  /* fix positioning when rotated 90 deg */
  /*transform-origin: 9px 13px;*/

}

/* */
.roam-center > div[style*="width: 100%; height: 100%;"] {
  width: var(--article-width) !important;
}
.roam-center > div[style*="width: 100%; height: 100%;"] > div {
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw !important;
  height: 100vw !important;
}

/* GRAPH VIEW */

/* you can't actually style the graph view because it uses canvas elements, but we *can* apply CSS filters to it to slightly change the appearance */
canvas[data-id="layer2-node"] {
  /*filter: invert(1) drop-shadow(0px 3px 4px rgba(0,0,0,0.1));*/
  filter: invert(1) hue-rotate(110deg) saturate(2.5);
  opacity: 0.3;
  transition: opacity .2s ease-out;
}

*[id*="cyto-wrapper"]:hover canvas[data-id="layer2-node"] {
  opacity: 1;
}


/* SLIDER */

.bp3-intent-primary {
  background-color: rgb(var(--color-primary)) !important;
}
.bp3-slider-handle {
  border-radius: 10px;
}

/* CHECKBOX */

.check-container .checkmark {
  width: 14px;
  height: 14px;
}
.check-container .checkmark::after {
  left: 4.5px;
  top: 1px;
}
.check-container input[checked] + .checkmark {
  background-color: rgb(var(--color-primary)) !important;
}

/*
.roam-topbar .bp3-popover-wrapper .bp3-popover-content {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}
.roam-topbar > .bp3-popover-wrapper .bp3-popover-arrow svg * {
    fill: #FFFFFF;
}*/


#buffer {
  background: transparent !important;
  right: 7px !important;
  bottom: 10px !important;
}
#buffer .bp3-popover-target >.bp3-button {
  background: rgba(0, 0, 0, 0.1);
  height: 30px;
  width: 30px;
}
#buffer > div {
  z-index: 99999 !important;
  background: rgb(var(--color-secondary), 0.7) !important;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 2px 8px 8px 8px;
  box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.1)
}
#buffer > div .bp3-button::before {
  color: #FFFFFF !important;

}
#buffer .help-title {
  color: var(--color-secondary-contrast) !important;
}
#buffer .help-sub-title {
  color: var(--color-secondary-contrast) !important;
  opacity: 0.5;
}
#buffer span {
  color: rgba(255, 255, 255, 0.8) !important;
}
#buffer a {
  text-decoration: underline;
  color: var(--color-secondary-contrast) !important;
}
#buffer a:hover {
  opacity: 0.5;
}


/* ------------- Red Pomodoro ------------- */
/* credit: https://github.com/theianjones/roam-research-themes/blob/master/pomodoros.css */
.rm-pomodoro {
  background: transparent !important;
  color: #ff4747 !important;
  padding: 4px 14px;
  line-height: 2em;
  font-weight: 600;
  border-radius: 2em;
  border: 1px solid #ff474770;
}

.rm-pomodoro::first-letter {
  margin-right: 8px;
}


/* BUTTON */
.block-bullet-view .bp3-button:not([class*="bp3-icon"]) {
  /*background: transparent !important;*/
  color: rgb(var(--color-primary)) !important;
  padding: 4px 14px;
  line-height: 2em;
  font-weight: 600;
  border-radius: 2em !important;
  border: 1px solid rgba(var(--color-primary), 0.5) !important;
  box-shadow: none !important;
}
.block-bullet-view .bp3-button:hover {
  background: rgba(var(--color-primary), 0.2) !important;

}

/* KANBAN */
.kanban-board {
  background-color: transparent;
  padding: 0;
  max-width: 500px;
}
.kanban-title {
  background: rgb(var(--color-primary));
  color: var(--color-primary-contrast) !important;
  font-weight: bold;
  padding: 0px !important;
  max-height: 30px;
  border: none;
  display: flex;
  align-items: center;
}
.kanban-title > span {
  display: block;
  margin: auto;
}
.kanban-column {
  border-radius: 10px;
  box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
  padding: 0;
  overflow: hidden;
}
.kanban-card {
  border-radius: 10px;
  box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
}
.kanban-card {
  background-color: var(--page-color);
  margin: 8px;
  box-shadow: 0px 1px 2px #9EB3C0;
  padding: 10px;
  border-radius: 4px;
  line-height: 1.3em;
}
.kanban-column {
  background-color: #ededed;
  margin: 0px 4px 0px 4px;
  min-width: 200px;
  border-radius: 6px;
}

/* ASTROLABE */

/* Breathing Loader */
/* https://codepen.io/Mathi_C/pen/mMWaaW */
.loading-astrolabe {
  height: 100px;
  width: 100px;
  border-radius: 200px;
  margin: auto;

}

.loading-astrolabe {
  animation-name: orb_1;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@keyframes orb_1 {
  from {
    transform: scale(0.2);
    background: rgb(var(--color-secondary));
  }
  to {
    transform: scale(2);
    background: rgb(var(--color-primary));
  }
}

/* Hide original loader */
.loading-astrolabe img {
  display: none;
}

.bp3-spinner {
  visibility: hidden;
}
.bp3-spinner > * {
  visibility: visible;
}

.bp3-spinner-head {
  stroke: rgb(var(--color-primary)) !important;
}








.roam-center > div > div > div svg {
  background-color: var(--bg-color) !important;
}

/* fix specific popover sizes and positions... */

.roam-topbar .bp3-popover-wrapper:nth-child(6) .bp3-popover,
.roam-topbar .bp3-popover-wrapper:nth-child(7) .bp3-popover{
  width: 600px;
  max-width: calc(100vw - 20px);
}
#roam-right-sidebar-content > div .flex-h-box > .bp3-popover-wrapper .bp3-transition-container {
  transform: translate3d(-15px, 41px, 0px) !important;
}
#roam-right-sidebar-content > div .flex-h-box > .bp3-popover-wrapper .bp3-transition-container .bp3-popover-arrow {
  left: 10px !important;
}
/* -------------------------- */
/*         MOBILE             */
/* -------------------------- */



@media only screen and (max-width: 600px) {
  .roam-topbar {
    margin: 0px !important;
    padding: 10px 0px 0px 0px !important;
    width: 100%;
    justify-content: center;
    position: fixed !important;
    top: 0px;
    left: 0px;
    backdrop-filter: blur(5px);
  }
  .roam-topbar::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--bg-color) !important;
    opacity: 0.7;

  }
  .roam-topbar > .flex-h-box {
    flex-direction: row;
    height: 1px !important;
    align-items: start !important;
    text-align: center;

    /*position: -webkit-sticky !important;
    position: fixed !important;
    left: 0px;
    top: 0;*/
    position: relative !important;
    width: 300px !important;
    margin: auto;
    justify-content: space-evenly;
  }
  .roam-topbar > div >.bp3-button:first-child {
    position: static !important;
  }

  .roam-sidebar-container {
    padding-right: 0;
    width: 232px !important;
  }
  .roam-sidebar-container > .roam-sidebar-content::before {
    right: 0px !important;
  }

  .roam-body-main {
    padding-left: 0 !important;
  }

  #find-or-create-input {
    max-width: calc(100% - 20px);
    left: 10px !important;
  }

  .roam-article,
  .rm-all-pages > .table,
  .rm-all-pages > .table > div {
    max-width: calc(100vw - 20px) !important;
    min-width: calc(100vw - 20px) !important;
    width: calc(100vw - 20px) !important;
  }
  .rm-all-pages > .table {
    margin-left: 10px;
    margin-right: 10px;
  }
  .roam-article {
    margin: 50px 10px !important;
    margin-bottom: 100px !important;
  }
  .roam-article > div {
    padding: 30px 30px 30px 20px;
  }


  #roam-right-sidebar-content > div > *{
    max-width: calc(100vw - 20px) !important;
  }
  /* position minus button */
  #roam-right-sidebar-content > div .bp3-icon-minus, #roam-right-sidebar-content > div .bp3-icon-plus {
    top: 60px;
  }
  /* position filter button */
  #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-popover-wrapper {
    top: 60px;
  }
  /* position references button */
  #roam-right-sidebar-content > div .bp3-icon-minus ~ button.bp3-button {
    top: 60px;
  }
  /* position close button */
  #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-cross {
    top: 60px;
  }

  .rm-title-display, .rm-title-textarea {
    margin-left: 0 !important;
  }
  #roam-right-sidebar-content > div .bp3-icon-minus + * {
    margin: 30px 10px 5px 30px !important;
  }

  .roam-topbar > div > *:nth-child(2) {
    margin-top: 0 !important;
  }

  #right-sidebar {
    padding-right: 10px !important;
  }
}

#mobile-capture {
  height: 100vh !important;
  background-color: var(--bg-color) !important;
}

#mobile-capture textarea, #mobile-capture input {
  background-color: var(--page-color) !important;
}
#mobile-capture textarea::placeholder, #mobile-capture input::placeholder {
  color: var(--text-color) !important;
  opacity: 0.3
}
#mobile-capture textarea {
  margin-top: 10px;
}

#rm-mobile-bar {
  max-width: 100vw;
  background-color: rgb(var(--color-secondary)) !important;
  position: fixed !important;
  z-index: 999999;
}
#rm-mobile-bar .bp3-button {
  vertical-align: top;
  margin: 5px 0px !important;

}
#rm-mobile-bar .bp3-button::before, #rm-mobile-bar .bp3-button i::before {
  color: var(--color-secondary-contrast) !important;
}
